import { useState } from "react";
import { Contact } from "./interface";
import ContactList from "./ContactList";
import Chat from "./Chat";

const contacts: Contact[] = [
  { name: "Taylor", email: "taylor@mail.com" },
  { name: "Alice", email: "alice@mail.com" },
  { name: "Bob", email: "bob@mail.com" }
];

function Messenger() {
  const [to, setTo] = useState<Contact>(contacts[0]);

  return (
    <div>
      <ContactList contacts={contacts} selectedContact={to} onSelect={contact => setTo(contact)} />

      <Chat key={to.email} contact={to} />
    </div>
  );
}

export default Messenger;
